<script src="http://d3js.org/d3.v6.min.js"></script>
<div>
    <!-- <div>
        <button (click)="addactor()" style="margin: 50px;">Add Actor</button>
        <button (click)="addnew()" style="margin: 50px;">Add </button>
        <button (click)="save()" style="margin: 50px;">save</button>
        <button (click)="open()" style="margin: 50px;">open</button>
        <input type="file" id="openFile" style="visibility: hidden;" />
        <button (click)="opennew()" style="margin: 50px;">opennew</button>
    </div>

    <div dDroppable (dropEvent)="onDrop($event)">
        <svg id='canvas' width=800 height=600 style="background-color: lightgoldenrodyellow;"></svg>
    </div> -->

    <div>
        <app-design [diagramData]='target.Diagram'>

        </app-design>
    </div>
    <!-- <div id='testdiv'>
        <div style="background-color: burlywood;width: 300px;height: 300px;" (mousedown)="outmousedown($event)">
            <div style="background-color:green;width: 100px;height: 100px;margin: 30px;"
                (mousedown)="inmousedown($event)"></div>
        </div>
        <input type="button" value="add line" (click)="addline()" />
        <svg id="testsvg" width="500" height="500">
            <circle cx="30" cy="30" r="50" fill="rgb(128,128,0)" (mouseup)="linked($event)"></circle>
            <circle cx="30" cy="30" r="20" fill="rgb(128,0,0)" (mouseup)="linked1($event)"></circle>
            <line x1=10 y1=0 x2=20 y2=100 stroke-width="8" stroke="rgb(0,255,0)" (click)="lc($event)"></line>
        </svg>
    </div> -->
</div>